<template name="listBox">
	<!-- 游记列表 -->
	<view class="listFlex">
		<navigator class="listBlcok"  v-for="(item, index) in listing" :key="index" :url="`/pages/common/${item.src}`" :id="item.id">
			<image :src="item.spimg" :mode="item.size" class="spimg"></image>
			<view class="listTitle">{{item.listTitle}}</view>
			<view class="listFooter">
				 <image :src="item.listPortrait" :mode="item.listmode">
				 <view class="listState">
					<view class="iconfont iconSize" :class="item.see"><text>{{item.listSee}}</text></view>
					<view class="iconfont iconSize" :class="item.like"><text>{{item.listLike}}</text></view>
				 </view>
			</view>
		</navigator>
		<view class="loading" v-if="falg">{{loadingText}}</view>
	</view>
</template>

<script>
	export default{
		name:"listBox",
		props:{
				listing:{
					src:{
						type: String,
						default: ''
					},
					spimg:{
						type: String,
						default: ''
					},
					/* size:{
						type: String,
						default: ''
					}, */
					listTitle:{
						type: String,
						default: ''
					},
					listPortrait:{
						type: String,
						default: ''
					},
					listmode:{
						type: String,
						default: ''
					},
					listSee:{
						type: String,
						default: ''
					},
					listLike:{
						type: String,
						default: ''
					}
				}
				
			},
		data(){
			return{
				falg:false,
				loadingText:'到底了'
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	@import "../../icon/iconfont.css";
	/* 公共游记模块 */
	.listFlex{
		 display: flex;
		 flex-flow:row wrap;
		  justify-content:center;
		 align-items:center;
		 justify-content: space-between; 
		 align-content:flex-start; 
		 align-items: flex-start;
		 box-sizing: border-box;
			.listBlcok{
				width: 350rpx;
				background-color: $uni-bg-color-grey;
				margin-bottom: 20rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				.spimg{
					width: 100%;
					height: 240rpx;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}
				.listTitle{
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					height: 62rpx;
					line-height: 35rpx;
					letter-spacing: $uni-spacing-row-dm;
					color: $uni-text-color;
					padding: 10rpx;
				}
				.listFooter{
					display: flex;
					padding:20rpx 14rpx 20rpx;
					image {
					  width: 50rpx;
					  height: 50rpx;
					  border-radius: 100%;
					}
					.listState{
						flex: 4;
						text-align: right;
						.iconSize{
							display: inline-block;
							font-size: $uni-font-size-xm;
							color: $uni-text-color-placeholder;
							padding-left: $uni-font-size-six;
							vertical-align: top;
							line-height: 50rpx;
							text {
							  font-size: $uni-font-size-sm;
							  padding-left: 6rpx;
							  display: inline-block;
							}
						}
					}
				}
			}
		
	}
	
</style>
